<template>
  <div class="left-container">
    <Card>
      <Chart :option="barOption" />
    </Card>
    <Card>
      <Chart :option="lineOption" />
    </Card>
    <Card>
      <Chart :option="pieOption" />
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import type { ECOption } from "@/utils/echarts";
import Card from "@/components/Card/index.vue";
import Chart from "@/components/Chart/index.vue";

defineOptions({
  name: "Left",
});

const barOption = ref<ECOption>({
  title: {
    text: "各行业程序员数量",
  },
  xAxis: {
    data: [],
  },
  series: {
    type: "bar",
    data: [],
    barWidth: 15,
    itemStyle: {
      borderRadius: 2,
    },
  },
  legend: {
    show: false,
  },
});

const lineOption = ref<ECOption>({
  title: {
    text: "学习变化",
  },
  xAxis: {
    data: [],
  },
  tooltip: {
    formatter: "{a0}: {c0}<br />{a1}: {c1}",
    trigger: "axis",
  },
  series: [],
  legend: {
    itemWidth: 15,
    itemHeight: 8,
    top: 11,
    right: 10,
  },
});

const pieOption = ref<ECOption>({
  title: {
    text: "工程师年龄分布",
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
  },
  series: {
    type: "pie",
    data: [],
    radius: [25, 40],
    label: {
      show: false,
    },
  },
  legend: {
    itemWidth: 10,
    itemHeight: 10,
    bottom: 10,
    left: "center",
  },
});

// const barOption = ref<ECOption>({
//   title: {
//     text: "各行业程序员数量",
//     textStyle: {
//       fontSize: 12,
//       color: "#fff",
//     },
//     left: "center",
//     top: 10,
//   },
//   xAxis: {
//     data: [],
//     axisLabel: {
//       color: "rgba(255, 255, 255, 0.6)",
//       fontSize: 8,
//     },
//     axisLine: {
//       show: true,
//       lineStyle: {
//         color: "rgba(255, 255, 255, .1)",
//       },
//     },
//   },
//   yAxis: {
//     axisLabel: {
//       color: "rgba(255, 255, 255, 0.6)",
//       fontSize: 8,
//     },
//     axisLine: {
//       show: true,
//       lineStyle: {
//         color: "rgba(255, 255, 255, .1)",
//       },
//     },
//     splitLine: {
//       lineStyle: {
//         color: "rgba(255, 255, 255, .1)",
//       },
//     },
//   },
//   tooltip: {
//     backgroundColor: "rgba(0, 0, 0, .6)",
//     borderWidth: 0,
//     textStyle: {
//       color: "#fff",
//       fontSize: 12,
//     },
//     formatter: "{b}: {c}个",
//   },
//   series: {
//     type: "bar",
//     data: [],
//     barWidth: 15,
//     itemStyle: {
//       borderRadius: 2,
//     },
//   },
//   grid: {
//     top: 50,
//     bottom: 10,
//     left: 10,
//     right: 10,
//     containLabel: true,
//   },
// });

// const lineOption = ref<ECOption>({
//   title: {
//     text: "学习变化",
//     textStyle: {
//       fontSize: 12,
//       color: "#fff",
//     },
//     left: "center",
//     top: 10,
//   },
//   xAxis: {
//     data: [],
//     axisLabel: {
//       color: "rgba(255, 255, 255, 0.6)",
//       fontSize: 8,
//     },
//     axisLine: {
//       show: true,
//       lineStyle: {
//         color: "rgba(255, 255, 255, .1)",
//       },
//     },
//   },
//   yAxis: {
//     axisLabel: {
//       color: "rgba(255, 255, 255, 0.6)",
//       fontSize: 8,
//     },
//     axisLine: {
//       show: true,
//       lineStyle: {
//         color: "rgba(255, 255, 255, .1)",
//       },
//     },
//     splitLine: {
//       lineStyle: {
//         color: "rgba(255, 255, 255, .1)",
//       },
//     },
//   },
//   tooltip: {
//     backgroundColor: "rgba(0, 0, 0, .6)",
//     borderWidth: 0,
//     textStyle: {
//       color: "#fff",
//       fontSize: 12,
//     },
//     formatter: "{a0}: {c0}<br />{a1}: {c1}",
//     trigger: "axis",
//   },
//   series: [
//     // {
//     //   type: "line",
//     //   data: [],
//     //   smooth: true,
//     //   name: "新增项目",
//     // },
//     // {
//     //   type: "line",
//     //   data: [],
//     //   smooth: true,
//     //   name: "新增技能",
//     // },
//   ],
//   grid: {
//     top: 50,
//     bottom: 10,
//     left: 10,
//     right: 10,
//     containLabel: true,
//   },
//   legend: {
//     textStyle: {
//       color: "#fff",
//       fontSize: 9,
//     },
//     itemWidth: 15,
//     itemHeight: 8,
//     top: 11,
//     right: 10,
//   },
// });

// const pieOption = ref<ECOption>({
//   title: {
//     text: "工程师年龄分布",
//     textStyle: {
//       fontSize: 12,
//       color: "#fff",
//     },
//     left: "center",
//     top: 10,
//   },
//   tooltip: {
//     backgroundColor: "rgba(0, 0, 0, .6)",
//     borderWidth: 0,
//     textStyle: {
//       color: "#fff",
//       fontSize: 12,
//     },
//     formatter: "{b}: {c}",
//   },
//   series: {
//     type: "pie",
//     data: [],
//     radius: [25, 40],
//     label: {
//       show: false,
//     },
//   },
//   grid: {
//     top: 50,
//     bottom: 10,
//     left: 10,
//     right: 10,
//     containLabel: true,
//   },
//   legend: {
//     textStyle: {
//       color: "#fff",
//       fontSize: 9,
//     },
//     itemWidth: 10,
//     itemHeight: 10,
//     bottom: 10,
//     left: "center",
//   },
// });

onMounted(() => {
  setTimeout(() => {
    const barAxisData = [
      "旅游行业",
      "游戏行业",
      "电商行业",
      "医疗行业",
      "金融行业",
      "教育培训",
      "餐饮行业",
    ];
    const barSeriesData = [300, 200, 400, 250, 550, 450, 350];

    (barOption.value.xAxis as any).data = barAxisData;
    (barOption.value.series as any).data = barSeriesData;

    const lineAxisData = [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ];
    const lineSeriesData = [
      {
        name: "新增项目",
        data: [300, 200, 400, 250, 550, 450, 350, 300, 200, 400, 250, 550],
      },
      {
        name: "新增技能",
        data: [450, 350, 300, 200, 400, 250, 550, 300, 250, 550, 200, 400],
      },
    ];

    (lineOption.value.xAxis as any).data = lineAxisData;
    (lineOption.value.series as any) = lineSeriesData.map((line) => {
      return {
        type: "line",
        data: line.data,
        smooth: true,
        name: line.name,
      };
    });

    const pieSeriesData = [
      {
        name: "20岁以下",
        value: 20,
      },
      {
        name: "20-29岁",
        value: 30,
      },
      {
        name: "30-39岁",
        value: 40,
      },
      {
        name: "40-49岁",
        value: 50,
      },
      {
        name: "50岁以上",
        value: 60,
      },
    ];
    (pieOption.value.series as any).data = pieSeriesData;
  }, 1000);
});
</script>

<style scoped lang="scss">
.left-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
